<template>
  <div class="kawaii-content-manage">
    <!-- 背景动画元素 -->
    <div class="animated-sparks">
      <div class="spark" v-for="n in 12" :key="n"></div>
    </div>

    <!-- 页面标题和筛选/搜索区域 -->
    <div class="kawaii-manage-header">
      <div class="header-title">
        <span>✨ 动漫投稿管理 ✨</span>
      </div>
      <div class="header-filter">
        <div class="filter-type">
          <div class="type-item active">全部稿件</div>
          <div class="type-item">审核中</div>
          <div class="type-item">已通过</div>
          <div class="type-item">未通过</div>
          <div class="type-item">草稿箱</div>
        </div>
      </div>
    </div>

    <!-- 视频列表 -->
    <div class="kawaii-video-list">
      <div class="list-header">
        <div class="header-cell video-cell">视频</div>
        <div class="header-cell publish-time-cell">发布时间</div>
        <div class="header-cell play-data-cell">播放数据</div>
        <div class="header-cell review-status-cell">审核状态</div>
        <div class="header-cell operation-cell">操作</div>
      </div>

      <!-- 列表内容 -->
      <div v-if="animeVideos.length > 0" class="video-items">
        <div
          v-for="(video, index) in animeVideos"
          :key="index"
          class="video-item"
        >
          <div class="video-cell">
            <div class="video-cover">
              <img :src="video.cover" alt="封面" />
              <div class="duration">{{ video.duration }}</div>
            </div>
            <div class="video-info">
              <div class="video-title">{{ video.title }}</div>
              <div class="video-desc">{{ video.desc }}</div>
            </div>
          </div>
          <div class="publish-time-cell">{{ video.publishTime }}</div>
          <div class="play-data-cell">
            <div class="plays">
              <span class="icon">▶️</span>
              <span class="value">{{ video.plays }}</span>
            </div>
            <div class="likes">
              <span class="icon">❤️</span>
              <span class="value">{{ video.likes }}</span>
            </div>
          </div>
          <div class="review-status-cell">
            <div :class="['status-tag', video.statusClass]">
              {{ video.status }}
            </div>
          </div>
          <div class="operation-cell">
            <div class="operation-buttons">
              <button class="edit-btn">编辑</button>
              <button class="delete-btn">删除</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 列表内容为空时的提示 -->
      <div v-else class="kawaii-empty-content">
        <img
          src="/src/assets/icons/empty-message.svg"
          alt="暂无内容"
          class="empty-icon wobble-animation"
        />
        <p class="empty-text">还没有投稿过视频呢~</p>
        <button class="kawaii-upload-btn" @click="goToUpload">
          <span class="btn-icon">✨</span>
          <span class="btn-text">立即投稿</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 动漫视频列表数据
const animeVideos = ref([
  {
    title: '我的英雄学院：最新角色演示',
    desc: '全新英雄角色技能展示与剧情预告',
    cover: '/src/assets/anime/images/banner1.png',
    duration: '12:45',
    publishTime: '2023-12-15',
    plays: '45,678',
    likes: '5,342',
    status: '已通过',
    statusClass: 'status-passed',
  },
  {
    title: '海贼王：最新剧情分析与猜想',
    desc: '1070话深度解析，路飞的新能力探讨',
    cover: '/src/assets/anime/images/banner2.png',
    duration: '18:22',
    publishTime: '2023-12-07',
    plays: '128,493',
    likes: '15,782',
    status: '已通过',
    statusClass: 'status-passed',
  },
  {
    title: '鬼灭之刃：柱训练篇AMV',
    desc: '炎柱与水柱的精彩战斗场景剪辑',
    cover: '/src/assets/anime/images/banner3.png',
    duration: '05:38',
    publishTime: '2023-11-29',
    plays: '98,217',
    likes: '12,039',
    status: '审核中',
    statusClass: 'status-reviewing',
  },
  {
    title: '间谍过家家：阿尼亚的日常',
    desc: '阿尼亚的搞笑日常与可爱瞬间合集',
    cover: '/src/assets/anime/images/luffy.png',
    duration: '09:15',
    publishTime: '2023-11-22',
    plays: '76,543',
    likes: '9,876',
    status: '已通过',
    statusClass: 'status-passed',
  },
  {
    title: '咒术回战0：五条悟战斗分析',
    desc: '五条悟的领域展开和技能分析',
    cover: '/src/assets/anime/images/banner1.png',
    duration: '14:30',
    publishTime: '2023-11-15',
    plays: '112,876',
    likes: '18,432',
    status: '未通过',
    statusClass: 'status-rejected',
  },
])

// 跳转到上传页面
const goToUpload = () => {
  router.push('/front/video/upload')
}

onMounted(() => {
  // 页面加载时的初始化逻辑
  console.log('稿件管理页面加载完成')
})
</script>

<style scoped lang="scss">
.kawaii-content-manage {
  width: 100%;
  position: relative;
  padding: 15px;
  overflow: hidden;

  // 背景动画元素
  .animated-sparks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;

    .spark {
      position: absolute;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background-color: #ffb7c5;
      opacity: 0.6;
      pointer-events: none;

      &:nth-child(1) {
        left: 10%;
        top: 15%;
        box-shadow: 0 0 5px 3px #ffb7c5;
        animation: sparkle 4s infinite ease-in-out;
        animation-delay: 0s;
      }

      &:nth-child(2) {
        left: 20%;
        top: 25%;
        box-shadow: 0 0 6px 4px #ffb7c5;
        animation: sparkle 5s infinite ease-in-out;
        animation-delay: 1s;
      }

      &:nth-child(3) {
        left: 30%;
        top: 45%;
        box-shadow: 0 0 7px 4px #ffb7c5;
        animation: sparkle 6s infinite ease-in-out;
        animation-delay: 2s;
      }

      &:nth-child(4) {
        left: 40%;
        top: 65%;
        box-shadow: 0 0 8px 3px #ffb7c5;
        animation: sparkle 7s infinite ease-in-out;
        animation-delay: 3s;
      }

      &:nth-child(5) {
        left: 50%;
        top: 85%;
        box-shadow: 0 0 6px 5px #ffb7c5;
        animation: sparkle 5s infinite ease-in-out;
        animation-delay: 2s;
      }

      &:nth-child(6) {
        left: 60%;
        top: 75%;
        box-shadow: 0 0 8px 6px #ffb7c5;
        animation: sparkle 6s infinite ease-in-out;
        animation-delay: 0s;
      }

      &:nth-child(7) {
        left: 70%;
        top: 55%;
        box-shadow: 0 0 5px 4px #ffb7c5;
        animation: sparkle 4s infinite ease-in-out;
        animation-delay: 1s;
      }

      &:nth-child(8) {
        left: 80%;
        top: 35%;
        box-shadow: 0 0 7px 5px #ffb7c5;
        animation: sparkle 7s infinite ease-in-out;
        animation-delay: 3s;
      }

      &:nth-child(9) {
        left: 90%;
        top: 20%;
        box-shadow: 0 0 6px 3px #ffb7c5;
        animation: sparkle 5s infinite ease-in-out;
        animation-delay: 2s;
      }

      &:nth-child(10) {
        left: 25%;
        top: 60%;
        box-shadow: 0 0 7px 4px #ffb7c5;
        animation: sparkle 6s infinite ease-in-out;
        animation-delay: 0s;
      }

      &:nth-child(11) {
        left: 45%;
        top: 30%;
        box-shadow: 0 0 6px 5px #ffb7c5;
        animation: sparkle 5s infinite ease-in-out;
        animation-delay: 2s;
      }

      &:nth-child(12) {
        left: 85%;
        top: 70%;
        box-shadow: 0 0 5px 3px #ffb7c5;
        animation: sparkle 4s infinite ease-in-out;
        animation-delay: 1s;
      }
    }
  }

  // 页面标题和筛选区域
  .kawaii-manage-header {
    margin-bottom: 25px;

    .header-title {
      margin-bottom: 20px;
      text-align: center;

      span {
        font-size: 22px;
        font-weight: 600;
        color: #ee6aa7;
        background: linear-gradient(45deg, #ee6aa7, #9370db);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
    }

    .header-filter {
      .filter-type {
        display: flex;
        justify-content: center;
        border-bottom: 2px solid #f8bbd0;

        .type-item {
          padding: 12px 20px;
          font-size: 15px;
          color: #9e9e9e;
          cursor: pointer;
          position: relative;
          transition: all 0.3s;
          border-radius: 8px 8px 0 0;

          &:hover {
            color: #ee6aa7;
            background-color: rgba(255, 183, 197, 0.1);
          }

          &.active {
            color: #ee6aa7;
            font-weight: 500;
            background-color: rgba(255, 183, 197, 0.2);

            &::after {
              content: '';
              position: absolute;
              bottom: -2px;
              left: 0;
              width: 100%;
              height: 3px;
              background: linear-gradient(to right, #ee6aa7, #9370db);
              border-radius: 3px;
            }
          }
        }
      }
    }
  }

  // 视频列表
  .kawaii-video-list {
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(236, 64, 122, 0.1);
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 8px 25px rgba(236, 64, 122, 0.15);
    }

    .list-header {
      display: flex;
      height: 50px;
      background-color: rgba(246, 187, 208, 0.3);
      border-bottom: 2px solid #fce4ec;

      .header-cell {
        display: flex;
        align-items: center;
        padding: 0 16px;
        font-size: 15px;
        color: #ec407a;
        font-weight: 500;
      }

      .video-cell {
        flex: 3;
      }

      .publish-time-cell {
        flex: 1;
      }

      .play-data-cell {
        flex: 1;
      }

      .review-status-cell {
        flex: 1;
      }

      .operation-cell {
        flex: 1;
      }
    }

    // 视频项目
    .video-items {
      .video-item {
        display: flex;
        padding: 15px 0;
        border-bottom: 1px solid #fce4ec;
        transition: all 0.3s;

        &:hover {
          background-color: rgba(252, 228, 236, 0.3);
          transform: translateY(-2px);
        }

        .video-cell {
          flex: 3;
          display: flex;
          padding: 0 16px;

          .video-cover {
            width: 120px;
            height: 68px;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.3s;
            }

            &:hover img {
              transform: scale(1.05);
            }

            .duration {
              position: absolute;
              bottom: 5px;
              right: 5px;
              background-color: rgba(0, 0, 0, 0.6);
              color: white;
              padding: 2px 4px;
              border-radius: 4px;
              font-size: 12px;
            }
          }

          .video-info {
            margin-left: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .video-title {
              font-size: 16px;
              font-weight: 500;
              color: #333;
              margin-bottom: 8px;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }

            .video-desc {
              font-size: 13px;
              color: #9e9e9e;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
          }
        }

        .publish-time-cell {
          flex: 1;
          display: flex;
          align-items: center;
          padding: 0 16px;
          color: #9e9e9e;
          font-size: 14px;
        }

        .play-data-cell {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 0 16px;

          .plays,
          .likes {
            display: flex;
            align-items: center;
            margin: 3px 0;

            .icon {
              margin-right: 5px;
              font-size: 14px;
            }

            .value {
              color: #757575;
              font-size: 14px;
            }
          }
        }

        .review-status-cell {
          flex: 1;
          display: flex;
          align-items: center;
          padding: 0 16px;

          .status-tag {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;

            &.status-passed {
              background-color: rgba(105, 240, 174, 0.2);
              color: #00c853;
              border: 1px solid rgba(0, 200, 83, 0.3);
            }

            &.status-reviewing {
              background-color: rgba(255, 213, 79, 0.2);
              color: #ffc107;
              border: 1px solid rgba(255, 193, 7, 0.3);
            }

            &.status-rejected {
              background-color: rgba(239, 83, 80, 0.2);
              color: #f44336;
              border: 1px solid rgba(244, 67, 54, 0.3);
            }
          }
        }

        .operation-cell {
          flex: 1;
          display: flex;
          align-items: center;
          padding: 0 16px;

          .operation-buttons {
            display: flex;

            button {
              padding: 6px 12px;
              border: none;
              border-radius: 20px;
              font-size: 13px;
              cursor: pointer;
              transition: all 0.3s;
              margin-right: 8px;

              &.edit-btn {
                background-color: rgba(41, 182, 246, 0.2);
                color: #29b6f6;
                border: 1px solid rgba(41, 182, 246, 0.3);

                &:hover {
                  background-color: rgba(41, 182, 246, 0.3);
                  transform: translateY(-2px);
                }
              }

              &.delete-btn {
                background-color: rgba(236, 64, 122, 0.2);
                color: #ec407a;
                border: 1px solid rgba(236, 64, 122, 0.3);

                &:hover {
                  background-color: rgba(236, 64, 122, 0.3);
                  transform: translateY(-2px);
                }
              }
            }
          }
        }
      }
    }

    // 空状态
    .kawaii-empty-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 0;
      background: linear-gradient(
        135deg,
        rgba(252, 228, 236, 0.6) 0%,
        rgba(243, 229, 245, 0.6) 100%
      );

      .empty-icon {
        width: 160px;
        height: 160px;
        opacity: 0.8;
        margin-bottom: 16px;
        filter: hue-rotate(300deg) saturate(1.5);

        &.wobble-animation {
          animation: wobble 6s ease-in-out infinite;
        }
      }

      .empty-text {
        font-size: 18px;
        color: #ec407a;
        margin-bottom: 24px;
      }

      .kawaii-upload-btn {
        display: flex;
        align-items: center;
        padding: 10px 28px;
        border: none;
        border-radius: 25px;
        background: linear-gradient(45deg, #ee6aa7, #9370db);
        color: white;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 4px 15px rgba(238, 106, 167, 0.4);

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 6px 20px rgba(238, 106, 167, 0.6);
        }

        .btn-icon {
          margin-right: 8px;
        }
      }
    }
  }
}

// 动画关键帧
@keyframes sparkle {
  0% {
    opacity: 0.2;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.5);
  }

  100% {
    opacity: 0.2;
    transform: scale(1);
  }
}

@keyframes wobble {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  25% {
    transform: translateY(-5px) rotate(-5deg);
  }

  75% {
    transform: translateY(-5px) rotate(5deg);
  }
}

// 响应式布局
@media screen and (max-width: 768px) {
  .kawaii-content-manage {
    .kawaii-manage-header {
      .header-filter {
        .filter-type {
          overflow-x: auto;
          white-space: nowrap;
          justify-content: flex-start;

          &::-webkit-scrollbar {
            display: none;
          }

          .type-item {
            padding: 12px 15px;
            font-size: 14px;
          }
        }
      }
    }

    .kawaii-video-list {
      .list-header {
        .header-cell {
          padding: 0 8px;
          font-size: 13px;
        }

        .publish-time-cell,
        .play-data-cell {
          display: none;
        }

        .video-cell {
          flex: 2;
        }
      }

      .video-items {
        .video-item {
          .publish-time-cell,
          .play-data-cell {
            display: none;
          }

          .video-cell {
            flex: 2;
          }
        }
      }
    }
  }
}
</style>
